<template>
  <el-card>
    <div slot="header">
      <el-form :model="filterParams" ref="filter-form">
        <el-form-item label="标题或内容" prop="key">
          <el-input v-model="filterParams.key"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="loading" @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleQuery" :disabled="loading"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="blogs" style="width: 100%" v-loading="loading">
      <el-table-column prop="btitle" label="标题" width="300">
      </el-table-column>
      <el-table-column prop="bsubmitter" label="作者" width="180">
      </el-table-column>
      <el-table-column prop="bcategory" label="分类" width="180">
      </el-table-column>
      <el-table-column prop="isPublic" label="是否公开" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isPublic"
            active-color="#13ce66"
            inactive-color="#b8b8b8"
            @change="handleSetPublic(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isTop" label="是否置顶" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isTop"
            active-color="#13ce66"
            inactive-color="#b8b8b8"
            @change="handleSetTop(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="bCreateTime" label="创建时间" width="180">
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
import Vue from 'vue'
import { getQueryBlogs, setPublic, setTop } from '@/services/blogs/blogs'
export default Vue.extend({
  name: 'BlogList',
  data() {
    return {
      blogs: [],
      filterParams: {
        page: 1,
        intPageSize: 20,
        key: '',
        isPublic: '',
        isTop: '',
        tag: '',
        category: '',
      },
      loading: true,
      dialogVisible: false,
      comments: [],
    }
  },

  created() {
    this.loadBlogs()
  },

  methods: {
    async loadBlogs() {
      this.loading = true
      const { data } = await getQueryBlogs(this.filterParams)
      console.log(data)
      this.blogs = data.response.data
      this.loading = false
    },

    async handleSetPublic(blog) {
      const { data } = await setPublic(blog.Id, blog.isPublic)
      console.log(data)
    },
    async handleSetTop(blog) {
      const { data } = await setTop(blog.Id, blog.isPublic)
      console.log(data)
    },
    handleQuery() {
      this.filterParams.page = 1
      this.loadBlogs()
    },

    handleReset() {
      this.$refs['filter-form'].resetFields()
      this.loadBlogs()
    },
  },
})
</script>
<style lang="scss" scoped></style>
